<template>
  <div style="height: 100%">
    <Modal v-model:visible="visible1" title="确认用户已经取走货物?" @ok="receviceFn"></Modal>
    <Modal v-model:visible="visible2" title="确定帮用户取消订单?" @ok="cancelFn"></Modal>

    <div style="margin-top: 20px; margin-left: 20px">
      已使用积分汇总：<span style="color: red">{{ totalData.totalIntegral }}</span>
    </div>
    <vxe-grid ref="tableRef" v-bind="gridOptions" >

      <template #action="{ row }">
        <TableAction
          v-if="row.status === 2"
          outside
          :actions="[
              {
                label: '待取货',
                onClick: handleEdit.bind(null, row),
              },
              {
                icon: 'ant-design:delete-outlined',
                color: 'error',
                onClick: handleDelete.bind(null, row),
                // popConfirm: {
                //   title: '是否确认删除',
                //   placement: 'left',
                //   confirm: handleDelete.bind(null, record),
                // },
              },
            ]"
        />

      </template>
    </vxe-grid>
    <FormModal @register="register" @success="handleSuccess" />
  </div>
</template>
<script lang="ts" setup>
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import {
    orderItemListApi,
    orderCancelApi,
    takesOrderApi,
    totalOrderIntegralApi,
  } from '@/api/sys/shop';
  import { Modal } from 'ant-design-vue';

  import {ref, onMounted, reactive} from 'vue';

  import FormModal from './FormModal.vue';

  import { columns, searchFormSchema } from './role.data';
  import { useMessage } from '@/hooks/web/useMessage';
  import { useModal } from '@/components/Modal';
  import {BasicTableProps, VxeTableDefines} from "@/components/VxeTable";
  import {vxeTableColumns, vxeTableFormSchema} from "@/views/warehouse/pmc/oemPmc/role.data";
  import {pmcOemList} from "@/api/heng/stock";

  defineOptions({ name: 'orderList' });
  const { createMessage } = useMessage();

  const [register, { openModal, closeModal }] = useModal();
  const userModal = useModal();

  const visible1 = ref(false); //收货确认
  const visible2 = ref(false); //取消确认
  const selectObj = ref({});
  const tableRef=ref();

  const gridOptions = reactive<BasicTableProps>({
    // keepSource: true,
    editConfig: { trigger: 'click', mode: 'cell', showStatus: true },
    border: true,
    showOverflow: true,
    size: 'mini',
    height: 'auto', // 'auto'
    columns,
    filterConfig: {
      remote: true,
    },
    sortConfig:{
      remote: true,
    },
    exportConfig:{},
    toolbarConfig: {
      slots: {
        buttons: 'toolbar_buttons',
      },
      refresh: true,
    },
    formConfig: {
      // enabled: true,
      items: searchFormSchema,
    },
    pagerConfig: {
      // pageSize: 20,
    },
    proxyConfig: {
      props: {
        result: 'data.list',
        list: 'data.list',
        total: 'data.totalResult',
        message: 'message',
      },
      filter: true,
      ajax: {
        query: ({ page, form, filters }) => {
          return findPageList(page, form, filters);

        }
      },
    },
  });

  function findPageList(page, form, filterList?: VxeTableDefines.FilterCheckedParams<any>[]) {

    let json = {};
    if (filterList && filterList.length) {
      filterList.forEach((e) => {
        const value = e.values[0];
        let field = e.field;
        let result=null;
        if(value!=null){
          result=value;
        }
        json[field ] = result;
      });
    }
    form.startTime=null;
    form.endTime=null;
    if(form.timeArr){
      form.startTime=form.timeArr[0] +" 00:00:00";
      form.endTime=form.timeArr[1] +" 23:59:59";
    }
    // console.log("----form:", form);

    return orderItemListApi({
      page: page.currentPage,
      pageSize: page.pageSize,
      ...form,
    });
  }



  function handleCreate() {
    openModal(true, {
      isUpdate: false,
    });
  }

  function handleEdit(record: Recordable) {
    // openModal(true, {
    //   record,
    //   isUpdate: true,
    // });
    visible1.value = true;
    selectObj.value = record;
  }

  function handleDelete(record: Recordable) {
    //console.log(record);
    visible2.value = true;
    selectObj.value = record;

    // categoryDeleteApi(record).then(res => {
    //   createMessage.success(res.message);
    //   })
    //   .catch((res) => {
    //     createMessage.error(res.message);
    //   })
    //   .finally(() => {
    //     reload();
    //   });
  }

  function receviceFn() {
    let json = selectObj.value;
    takesOrderApi(json)
      .then((res) => {
        visible1.value = false;

        createMessage.success(res.message);
      })
      .catch((res) => {
        createMessage.error(res.message);
      })
      .finally(() => {
        reload();
      });
  }
  function cancelFn() {
    let json = selectObj.value;

    orderCancelApi(json)
      .then((res) => {
        visible2.value = false;
        createMessage.success(res.message);
      })
      .catch((res) => {
        createMessage.error(res.message);
      })
      .finally(() => {
        reload();
      });
  }

  function handleSuccess() {
    reload();
  }

  onMounted(() => {
    totalOrderIntegralFn();
  });

  function reload() {
    tableRef.value.commitProxy('reload');
  }

  const totalData = ref({});
  function totalOrderIntegralFn() {
    totalOrderIntegralApi({}).then((res) => {
      if (res.code == 200) {
        totalData.value = res.data;
      }
    });
  }
</script>
